<div class="device-container">
  <div class="flex device-info bl">
    <div class="flex1 device-icon color-theme cursor">
      <div (click)="showBindDevice()">
        <i nz-icon [iconfont]="'icon-equipment'"></i><br>
        <b class="device-name" *ngIf="deviceData?.deviceCodeName">
          {{'Ide0000' | translate}}
          <span class="color-theme">{{deviceData?.deviceCodeName || ''}}</span>
        </b>
      </div>
    </div>
    <div class="flex1 device-data">
      <ng-container *ngIf="myDeviceElectricData?.state">
        <span class="data-name">

          <ng-container *ngIf="myDeviceElectricData.state === deviceChargingStates.standby">
            <i nz-icon [iconfont]="'icon-urgency'" *ngIf="myDeviceElectricData.capacity < 20"></i>
            <i nz-icon [iconfont]="'icon-low'" *ngIf="myDeviceElectricData.capacity > 20 && myDeviceElectricData.capacity < 40"></i>
            <i nz-icon [iconfont]="'icon-60'" *ngIf="myDeviceElectricData.capacity > 40 && myDeviceElectricData.capacity < 60"></i>
            <i nz-icon [iconfont]="'icon-80'" *ngIf="myDeviceElectricData.capacity > 60 && myDeviceElectricData.capacity < 80"></i>
            <i nz-icon [iconfont]="'icon-full'" *ngIf="myDeviceElectricData.capacity > 80"></i>
          </ng-container>

          <i nz-icon [iconfont]="'icon-charging'" *ngIf="myDeviceElectricData.state === deviceChargingStates.charging"></i>
          <i nz-icon [iconfont]="'icon-charged'" *ngIf="myDeviceElectricData.state === deviceChargingStates.fullyCharged"></i>
          <i nz-icon [iconfont]="'icon-battery'" *ngIf="myDeviceElectricData.state === deviceChargingStates.stateless || !myDeviceElectricData.state"></i>

         </span>
        <span> {{myDeviceElectricData.capacity || 0}}%</span>
      </ng-container>

      <span class="data-name">
        <nz-badge *ngIf="deviceState === deviceStates.online"
                  nzStatus="success"
                  [nzText]="deviceState"></nz-badge>
        <nz-badge *ngIf="deviceState === deviceStates.offline"
                  nzStatus="error"
                  [nzText]="deviceState"></nz-badge>
      </span>
      <br>
      <span class="data-name" *ngIf="deviceData?.ip">IP</span>&nbsp;&nbsp;<span class="color-blue">{{deviceData?.ip || ''}}</span>
    </div>
  </div>
</div>
